<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/news3.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-icon mui-icon-bars"></a>
		    <h1 class="mui-title">News</h1>
		    <a class="mui-icon mui-icon-more-filled"></a>
		</header>
		
		<div class="mui-content">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			    <div class="mui-scroll">
			        <a class="mui-control-item mui-active">
			            ALL
			        </a>
			        <a class="mui-control-item">
			          WORLD
			        </a>
			        <a class="mui-control-item">
			           TOPICS
			        </a>
			        <a class="mui-control-item">
			           FAVORITES
			        </a>
			        <a class="mui-control-item">
			           娱乐
			        </a>
			        <a class="mui-control-item">
			           科技
			        </a>
			    </div>
			</div>
			
			
			<ul class="mui-table-view mui-grid-view mui-grid-9">
			    <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
			        <a href="#">
			            <div class="mui-media-body" style="background-image: url(img/3-1-1.png);background-size: cover;">
			                <div class="box1">
			            	    <button type="button"><h6>CITY NOTES</h6></button>
			            	    <h5>Munich Made the</h5>
			            	    <h5>Night City Illumination</h5>
			            	    <div class="ground"></div>
			            	    <span class="text">Mariya Willams</span>   
			                </div>	
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
			        <a href="#">
			            <div class="mui-media-body">
			        	    <div class="box2">
			        		    <button type="button"><h6>SPACE</h6></button>
			        		    <h5>Go Holoday for a lll'</h5>
			        		    <h5 style="margin-bottom: 10px;">Raid and Relexation</h5>
			        		    <h6>But I must explain to you how</h6>
			        		    <h6>this mistaken idea of denounci</h6>
			        		    <h6>pleasure and praising...</h6>
			        		    <div class="ground"></div>
			        		    <span class="text">Yaroslav Zaitsev</span>
			        	    </div>
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
			        <a href="#">
			            <div class="mui-media-body">
			        	    <div class="box3">
			        		    <button type="button"><h6>HITECH</h6></button>
			        		    <h5>Aleplaners,the</h5>
			        		    <h5 style="margin-bottom: 10px;">Octher Kind of Ship</h5>
			        		    <h6>But I must explain to you how</h6>
			        		    <h6>this mistaken idea of denounci</h6>
			        		    <h6>pleasure and praising...</h6>
			        		    <div class="ground"></div>
			        		    <span class="text">Michael Nashvell</span>
			        	    </div>
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
			        <a href="#">
			            <div class="mui-media-body" style="background-image: url(img/3-3-1.png);background-size: cover;">
			        	    <div class="box4">
			        		    <button type="button"><h6>LOCAL</h6></button>
			            	    <h5>Sighfree the Local,</h5>
			            	    <h5>Landbbers Abound</h5>
			            	    <div class="ground"></div>
			            	    <span class="text">Edvard Norton</span>
			        	    </div>
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
			        <a href="#">
			            <div class="mui-media-body" style="background-image: url(img/3.png);background-size: cover;">
			                <div class="box5">
			            	    <button type="button"><h6>MUSEUM</h6></button>
			            	    <h5>New Exhibits at</h5>
			            	    <h5>the Greek Museum</h5>
			            	    <div class="ground"></div>
			            	    <span class="text">Kristian Dong</span>   
			                </div>	
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media mui-col-xs-6 ">
			        <a href="#">
			            <div class="mui-media-body">
			        	    <div class="box6">
			        		    <button type="button"><h6>TRAVEL</h6></button>
			        		    <h5>Travel Around the</h5>
			        		    <h5 style="margin-bottom: 10px;">World with a Friend</h5>
			        		    <h6>But I must explain to you how</h6>
			        		    <h6>this mistaken idea of denounci</h6>
			        		    <h6>pleasure and praising...</h6>
			        		    <div class="ground"></div>
			        		    <span class="text">Erick Woodsen</span>
			        	    </div>
			            </div>
			        </a>
			    </li>
			</ul>
			
		</div>
		
		
		
		
		
		
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>